<template>
  <div class="menu-content">
    <w-table id="diagramContainer" border ref="multipleTable" :data="tableData" style="width: 100%" @row-click="rowClick"
      :row-style="rowStyle" :row-class-name="rowClassName" @selection-change="handleSelectionChange">
      <w-table-column type="selection" width="50">
      </w-table-column>
      <w-table-column prop="zbId" label="指标ID">
      </w-table-column>
      <w-table-column prop="zbName" label="指标名称" width="150">
      </w-table-column>
      <w-table-column prop="standardSourceName" label="标准">
      </w-table-column>
      <w-table-column prop="compareOperator" label="规则">
      </w-table-column>
      <w-table-column prop="realValue" label="实际值">
      </w-table-column>

    </w-table>
    <!-- <div id="item_left">啦啦啦啦</div>
    <div id="item_right">哈哈哈哈</div> -->
    <div id="div1" style="width: 100%;height:50px;">aaaaa</div>
    <div id="div2" style="width: 100%;height:50px;border-top:1px solid #000000;">bbbb</div>
  </div>
</template>

<script>
  /**获取最新最上最下行 */
  function getTopAndBottom(row, bottom, top) {
    let n = row.rowIndex,
      mx = bottom.rowIndex,
      mi = top.rowIndex;
    if (n > mx) {
      return {
        top: mi,
        bottom: n
      };
    } else if (n < mx && n > mi) {
      return {
        top: mi,
        bottom: n
      };
    } else if (n < mi) {
      return {
        top: n,
        bottom: mx
      };
    } else if (n == mi || n == mx) {
      return {
        top: mi,
        bottom: mx
      };
    }
  };
  import jsplumb from 'jsplumb'
  export default {
    data() {
      return {
        selectionRow: [],
        tableData: [{
          zbId: 'A1001',
          zbName: '急诊人次',
          standardSourceName: '国家标准',
          compareOperator: '大于',
          realValue: '0'
        }, {
          zbId: 'A1002',
          zbName: '急诊人次',
          standardSourceName: '国家标准',
          compareOperator: '大于',
          realValue: '0'
        }, {
          zbId: 'A1003',
          zbName: '急诊人次',
          standardSourceName: '国家标准',
          compareOperator: '大于',
          realValue: '0'
        }, {
          zbId: 'A1004',
          zbName: '急诊人次',
          standardSourceName: '国家标准',
          compareOperator: '大于',
          realValue: '0'
        }, {
          zbId: 'A1005',
          zbName: '急诊人次',
          standardSourceName: '国家标准',
          compareOperator: '大于',
          realValue: '0'
        }],
      }
    },
    created() {

    },
    computed: { //实时得到最上行和最下行
      bottomSelectionRow() {
        if (this.selectionRow.length == 0) return null;
        return this.selectionRow.reduce((start, end) => {
          return start.rowIndex > end.rowIndex ? start : end;
        });
      },
      topSelectionRow() {
        if (this.selectionRow.length == 0) return null;
        return this.selectionRow.reduce((start, end) => {
          return start.rowIndex < end.rowIndex ? start : end;
        });
      }
    },
    methods: {
      drawLine(startObj, endObj) {
        console.log('startObj',startObj)
        console.log('endObj',endObj)
        var html = "";
        var y_start = Number(startObj.css("top").replace("px", "")) + startObj.height() / 2;
        var x_start = Number(startObj.css("left").replace("px", "")) + startObj.width();
        var y_end = Number(endObj.css("top").replace("px", "")) + endObj.height() / 2;
        var x_end = Number(endObj.css("left").replace("px", ""));
        var deg = 0;
        if (y_start == y_end) // 画横线
        {
          if (x_start > x_end) {
            var t = x_start;
            x_start = x_end;
            x_end = t
            deg = 180;
          }
          length = Math.abs(x_end - x_start);
        } else if (x_start == x_end) // 画竖线
        {
          deg = 90;
          if (y_start > y_end) {
            var t = y_start;
            y_start = y_end;
            y_end = t
            deg = 270;
          }
          length = Math.abs(y_end - y_start);
        } else { // 画线旋转角度
          var lx = x_end - x_start;
          var ly = y_end - y_start;
          var length = Math.sqrt(lx * lx + ly * ly); //计算连线长度
          var c = 360 * Math.atan2(ly, lx) / (2 * Math.PI); //弧度值转换为角度值
          c = c <= -90 ? (360 + c) : c; //负角转换为正角
          deg = c;
        }
        html = "<div class='rotate' style='top:" + y_start + "px;left:" + x_start +
          "px;width:" + length + "px;transform:rotate(" + deg + "deg)'>" +
          "<i class='arrow-img'></i>" +
          "<i class='con-img'></i></div>";
        return html;
      },
      rowClick(row, column, event) {
        let refsElTable = this.$refs.multipleTable; // 获取表格对象
        let findRow = this.selectionRow.find(c => c.rowIndex == row.rowIndex);
        // if (this.CtrlDown) {
        //   refsElTable.toggleRowSelection(row); // ctrl多选 如果点击两次同样会取消选中
        //   return;
        // }
        if (this.CtrlDown && this.selectionRow.length > 0) {
          let topAndBottom = getTopAndBottom(row, this.bottomSelectionRow, this.topSelectionRow);
          refsElTable.clearSelection(); //先清空 不然会导致在这两行中间之外的行状态不变
          for (let index = topAndBottom.top; index <= topAndBottom.bottom; index++) { //选中两行之间的所有行
            refsElTable.toggleRowSelection(this.tableData[index], true);
          }
        } else {
          let findRow = this.selectionRow.find(c => c.rowIndex == row.rowIndex); //找出当前选中行
          //如果只有一行且点击的也是这一行则取消选择 否则清空再选中当前点击行
          if (findRow && this.selectionRow.length === 1) {
            refsElTable.toggleRowSelection(row, false);
            return;
          }
          refsElTable.clearSelection();
          refsElTable.toggleRowSelection(row);
        }
        // if (findRow) {
        //   refsElTable.toggleRowSelection(row, false);
        //   return;
        // }
        // refsElTable.clearSelection();
        // refsElTable.toggleRowSelection(row); // 调用选中行方法
      },
      rowStyle({
        row,
        rowIndex
      }) {
        Object.defineProperty(row, 'rowIndex', { //给每一行添加不可枚举属性rowIndex来标识当前行
          value: rowIndex,
          writable: true,
          enumerable: false
        })
      },
      rowClassName({
        row,
        rowIndex
      }) {
        let rowName = "",
          findRow = this.selectionRow.find(c => c.rowIndex === row.rowIndex);
        if (findRow) {
          rowName = "current-row "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
        }
        return rowName; //也可以再加上其他类名 如果有需求的话
      },
      handleSelectionChange(rows) {
        this.selectionRow = rows //保存已选择行
      },
      keyDown(event) {
        let key = event.keyCode;
        if (key == 17) this.CtrlDown = true;
      },
      keyUp(event) {
        let key = event.keyCode;
        if (key == 17) this.CtrlDown = false;
      },
    },
    mounted() {
      // this.drawLine(document.getElementById('div1'),document.getElementById('div2'))
      addEventListener("keydown", this.keyDown, false);
      addEventListener("keyup", this.keyUp, false);
      jsPlumb.ready(function() {
        jsPlumb.connect({
          source: 'item_left',
          target: 'item_right',
          // endpoint: 'Rectangle',
          endpointStyles: [null, null],
          connector: ['Flowchart'],
          anchor: ['Right']
        })
      })
    },
    beforeDestroy() { //解绑
      removeEventListener("keydown", this.keyDown);
      removeEventListener("keyup", this.keyUp);
    }
  }
</script>

<style>
  .jtk-endpoint {
    display: none;
  }
  #div1{
    top:0;
    left:0;
  }
  #div2{
    top:0;
    left:0;
  }
</style>
